<template>
  <div class="card">
    <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          >
      <div class="item" v-for="(item,index) in collect" :key="index">
        <div class="bg">
          <img v-if="item.status_k == 'not_start'" src="../../assets/img/mine/sxcard.png" />
          <img v-if="item.status_k == 'overdue'" src="../../assets/img/mine/sxcard.png" />
          <img v-if="item.status_k == 'had_use'" src="../../assets/img/mine/sxcard.png" />
          <img v-if="item.status_k == 'not_use'" src="../../assets/img/mine/card.png" />
        </div>
        <div class="box">
          <div class="box-l">
            <p class="p1"><span>￥</span>{{item.type_money}}</p>
            <p class="p2">{{item.min_goods_amount_desc}}</p>
          </div>
          <div class="box-r">
            <div class="r-l">
              <p class="p3">{{item.type_name}}</p>
              <p class="p4">{{item.use_startdate}}~{{item.use_enddate}}</p>
            </div>
            <div class="lose" v-if="item.status_k == 'not_start'">
              未开始 
            </div>
            <div class="lose" v-if="item.status_k == 'overdue'">
              已过期
            </div>
            <div class="r-r" v-if="item.status_k == 'not_use'">
              未使用
            </div>
            <div class="lose" v-if="item.status_k == 'had_use'">
              已使用
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        collect:[],
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      this.shoucang(1)
    },
    mounted(){
      
    },
    
    methods: {
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.shoucang(this.page)
        }, 500);
      },
      // shoucang
      shoucang(page){
        this.$get("api/gzh_mine.php?action=bonus_list", {
          uid:localStorage.getItem('uid'),
          page:page
        }).then(res => { 
          console.log(res.data,'res.data')
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.collect = res.data
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.collect.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },

    },
  }
</script>

<style scoped>
.card{
  width: 100%;
  height: 100%;
  border-top:1PX solid #EFEFEF;
  min-height: 100vh;
  background: #F8F8F8;
}
.item{
  width: 704px;
  height: 181px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}
.item .bg{
  width: 704px;
  height: 181px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.item img{
  width: 704px;
  height: 181px;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 704px;
  height: 181px;
}
.box-l{
  width: 220px;
  height: 181px;
  padding-top: 35px;
  text-align: center;
  box-sizing: border-box;
}
.box-l .p1{
  font-size: 50px;
  color: #fff;
}
.box-l .p1 span{
  font-size: 26px;
  margin-right: 10px;
}
.box-l .p2{
  font-size: 26px;
  color: #fff;
  margin-top: 10px;
}
.box-r{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 484px;
  height: 181px;
}
.r-l{
  margin-left: 30px;
}
.r-l .p3{
  font-size: 30px;
  color: #333;
}
.r-l .p4{
  font-size: 24px;
  color: #9e9e9e;
  margin-top: 38px;
}
.r-r{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #06a255;
  font-size: 24px;
  color: #06a255;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}
.lose{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #ccc;
  font-size: 24px;
  color: #ccc;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}
</style>
<style>
  .van-list{
      height:100vh;
      width: 100%;
      overflow: hidden;
    overflow-y: scroll;
  }
</style>